<template>
  <div>
    <div class="year-picker-box">
      <el-date-picker
        v-model="start"
        type="year"
        size="small"
        style="width: 100px"
        placeholder="开始年份"
      >
      </el-date-picker>
      <span style="margin-left: 5px; margin-right: 5px">至</span>
      <el-date-picker
        v-model="end"
        type="year"
        size="small"
        style="width: 100px; margin-right: 5px"
        placeholder="结束年份"
      >
      </el-date-picker>
      <el-button size="small" type="primary" @click="handleClick"
        >确定</el-button
      >
      <br />
      <div style="text-align: left">
        <el-button
          type="text"
          size="small"
          style="display: inline"
          @click="handleShortCut(1)"
          >最近一年</el-button
        >
        <el-button
          type="text"
          size="small"
          style="display: inline"
          @click="handleShortCut(3)"
          >最近三年</el-button
        >
        <el-button
          type="text"
          size="small"
          style="display: inline"
          @click="handleShortCut(5)"
          >最近五年</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "YearRangePicker",
  components: {},
  data() {
    return {
      years: [],
      start: null,
      end: null,
      minYear: null, //年份最小值
      maxYear: null, //年份最大值
    };
  },
  created() {
    this.getYears();
  },
  methods: {
    getYears() {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        this.years = res.data.data;

        this.years = this.years.sort(function (a, b) {
          return a - b;
        });

        //最小年份，最大年份
        this.minYear = new Date("" + this.years[0] + "-1-1");
        this.maxYear = new Date(
          "" + this.years[this.years.length - 1] + "-1-1"
        );

        //默认为最近一年
        this.end = this.maxYear;
        this.start = this.maxYear;
      });
    },
    isEarlyThan(dateA, dateB) {
      // dateA 比 dateB 早则为 true(严格小于)
      const yearA = dateA.getFullYear();
      const yearB = dateB.getFullYear();

      if (yearA < yearB) {
        return true;
      } else {
        return false;
      }
    },
    handleShortCut(val) {
      //date类型的数据，单纯的赋值实际上是浅拷贝，指向同一个地址，所以当一个变量变化，这个地址也会跟着变，所以要用到深拷贝
      Date.prototype.clone = function () {
        return new Date(this.valueOf());
      };

      //最近x年的end
      this.end = this.maxYear.clone();
      //最近x年的start
      let start = this.maxYear.clone();
      start.setFullYear(start.getFullYear() - val + 1);
      this.start = start.clone();
    },
    handleClick() {
      let start = this.start.getFullYear();
      let end = this.end.getFullYear();
      if (!start || !end) {
        this.$message({
          type: "error",
          message:
            "请选择年份，范围为" +
            this.years[0] +
            "~" +
            this.years[this.years.length - 1],
        });
      } else if (
        start < this.years[0] ||
        end > this.years[this.years.length - 1]
      ) {
        this.$message({
          type: "error",
          message:
            "年份超出范围，请重新选择，范围为" +
            this.years[0] +
            "~" +
            this.years[this.years.length - 1],
        });
      } else if (start > end) {
        this.$message({
          type: "error",
          message: "起始年份不能大于结束年份，请重新选择",
        });
      } else {
        this.$emit("get-year-range", start, end);
      }
    },
    disabledDate(time) {
      //查阅过官方文档后，发现需要返回boolean值
      return (
        this.isEarlyThan(time, this.minYear) ||
        this.isEarlyThan(this.maxYear, time)
      );
    },
  },
};
</script>

<style scoped>
.year-picker-box {
  padding: 10px;
  width: 290px;
}
</style>
